<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有声相册网页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font_4526685_84hwoolc3o5/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <em>MY AUDIO ALBUM</em>
        <ul>
            <li><a href="靓女.html" target="_blank">美女</a></li>
            <li><a href="型男.html" target="_blank">型男</a></li>
            <li><a href="科学家.html" target="_blank">科学家</a></li>
            <li><a href="https://gitee.com/hxxyyyyyy/shuzihuachengzhangkongjian.git">码云仓库</a></li>
        </ul>

    </header>
    <!-- 主体 -->
    <div class="w">
    <div class="cards">
            <img src="images/j1.jpg" alt="">
            <div class="card-title">
                <p>
                    靓女<br>
                    美人出南国
                </p>
            </div>
            <span class="iconfont icon-xiangxiajiantou" ></span>
                    <div class="card-description">
                        美人出南国，灼灼芙蓉姿。皓齿终不发，芳心空自持。由来紫宫女，共妒青蛾眉。归去潇湘沚，沉吟何足悲。                   
                    <a href="靓女.html" class="btn">READ MORE</a>
                    </div>
    </div>
    <div class="cards">
        <img src="images/关公.png" alt="">
        <div class="card-title">
            <p>
                型男<br>
                且看关公耍大刀
            </p>
        </div>
        <span class="iconfont icon-xiangxiajiantou">
            <!-- 字体图标下拉 -->
        </span>
        <div class="card-description">
            关公文化是一种传统民间信仰。在中国，供奉文圣孔子的文宣王庙有很多，过去在各个城邑都有这类建筑。。
            <a href="型男.html" class="btn">READ MORE</a>
        </div>
    </div>
    <div class="cards">
        <img src="images/k1.png" alt="">
        <div class="card-title">
            <p>
                scientist<br>
                心有大我 至诚报国
            </p>
        </div>
        <span class="iconfont icon-xiangxiajiantou" id="btn">
            <!-- 字体图标下拉 -->
        </span>
        <div class="card-description" id="pop">
            为中华之崛起，为民族之复兴——这是我国一代代科学家的自我期许、使命担当。
            <a href="科学家.html" class="btn">READ MORE</a>
        </div>
    </div>
    <div class="cards">
        <img src="images/q2.jpg" alt="">
        <div class="card-title">
            <p>
                business<br>
                爱国 敬业 诚信 友善
            </p>
        </div>
        <span class="iconfont icon-xiangxiajiantou" id="btn">
            <!-- 字体图标下拉 -->
        </span>
        <div class="card-description" id="pop">
            ————————————企业文化。
            <a href="企业家.html" class="btn">READ MORE</a>
        </div>
    </div>
    </div>
</body>

</html>
